<template>
  <contents class="me_page" :heightInclude="['tabBar']">
    <u-navbar
      :title="$t('locales.pages/me/index')"
      :title-width="570"
      :border-bottom="false"
      :background="{ background: '#0049AC' }"
      title-color="#fff"
      :is-back="false"
    >
      <view
        v-if="isLogin"
        slot="right"
        class="right-icon"
        @click="onClickMessageBtn"
      >
        <text v-if="!isRead && isLogin" class="dot"></text>
        <u-icon name="chat" color="#fff" size="44rpx" />
      </view>
    </u-navbar>

    <UserName :value="userInfo" />
    <u-gap height="20" bg-color="#F7F7F8"></u-gap>
    <OrderManagement v-model="orderNum" />
    <!-- <u-gap height="20" bg-color="#F7F7F8"></u-gap> -->
    <!-- <FinancialBills /> -->
    <u-gap height="20" bg-color="#F7F7F8"></u-gap>
    <!-- <view class="wallet-cell" @click="walletNavSwitch">
      <view class="left">
        <image class="wallet-icon" src="@/static/images/wallet-icon.png" />
        <view style="font-size: 30rpx; font-weight: 500; margin-right: 13rpx"
          >我的钱包</view
        >
        <view style="font-size: 22rpx; font-weight: 400; margin-right: 13rpx"
          >账户余额（元）</view
        >
      </view>
      <view class="right">
        <template v-if="walletStatue">
          <view
            style="
              font-size: 34rpx;
              font-family: Arial;
              font-weight: 400;
              color: #6a4714;
              margin-right: 15rpx;
            "
            >{{ walletInfo.aviAmt || '0.00' }}</view
          >
          <u-icon name="arrow-right" color="#6A4714" size="28"></u-icon>
        </template>
        <template v-else>
          <view class="wallet-btn">开通钱包</view>
        </template>
      </view>
    </view> -->
    <u-cell-group>
      <u-cell-item
        @click="navSwitch('/pages/wantBuy/index')"
        title=""
        :title-style="{ fontWeight: 500, color: '#000' }"
      >
        <view slot="title" class="wantBuy-cell">
          <text>我的求购</text>
          <text class="new" v-if="showPurchaseFlag">New</text>
        </view>
      </u-cell-item>
      <u-cell-item
        @click="navSwitch('/pages/user/address/index')"
        :title="$t('locales.receivingAddress')"
        :title-style="{ fontWeight: 500, color: '#000' }"
      ></u-cell-item>
      <!-- <u-cell-item
				@click="navSwitch('/pages/user/cardbag/index')"
				title="卡包"
				:title-style="{ fontWeight: 500, color: '#000' }"
			></u-cell-item> -->
      <u-cell-item
        @click="navSwitch('/pages/user/collection/index')"
        :title="$t('locales.myCollection')"
        :title-style="{ fontWeight: 500, color: '#000' }"
      ></u-cell-item>
      <u-gap height="20" bg-color="#F7F7F8"></u-gap>
      <u-cell-item
        @click="navSwitch('/pages/user/settings/index')"
        :title="$t('locales.accountSettings')"
        :title-style="{ fontWeight: 500, color: '#000' }"
      ></u-cell-item>
      <!-- <u-cell-item
        @click="navSwitch('/pages/testIndex/index')"
        title="测试"
        :title-style="{ fontWeight: 500, color: '#000' }"
      ></u-cell-item> -->
      
    </u-cell-group>
    <u-gap height="20" bg-color="#F7F7F8"></u-gap>
    <NoNetWork />

    <!-- <view style="display: flex; justify-content: flex-start;">
			<view style="width: 360rpx; height: 240rpx;">
				<u-image width="360" height="240" mode="aspectFit" src="@/static/logo.png" />
			</view>

			<view style="width: 360rpx; height: 240rpx;">
				<u-image width="360" height="240" mode="aspectFit" src="@/static/arabic.jpeg" />
			</view>
		</view> -->
  </contents>
</template>

<script>
import UserName from '@/components/userName'
import OrderManagement from '@/components/orderManagement'
import FinancialBills from '@/components/financialBills'
import { orderTypeNum } from '@/api/http/order'
import { getMessageReadAction, getNewFlag } from '@/api/http/user'
import { getMyWalletInfo, doVisAcctBalance } from '@/api/http/wallet'
import NoNetWork from '@/components/no-network'
export default {
  components: {
    UserName,
    OrderManagement,
    FinancialBills,
    NoNetWork
  },
  data() {
    return {
      userInfo: null,
      orderNum: {},

      isRead: false,

      walletStatue: false,
      walletInfo: {},
      showPurchaseFlag: false
    }
  },

  computed: {
    isLogin() {
      return this.$store.getters.isLogin
    }
  },

  onLoad() {
    // this.getData()
  },
  onShow() {
    if (this.$store.getters.isLogin) {
      this.getData()
      this.getMessageReadAction()
    }
  },
  onPullDownRefresh() {
    if (this.$store.getters.isLogin) {
      this.getData()
      this.getMessageReadAction()
    }
    uni.stopPullDownRefresh()
  },
  methods: {
    async getMessageReadAction() {
      try {
        const res = await getMessageReadAction()

        if (res.code === 200) {
          this.isRead = res.data
        } else {
          return uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      } catch (e) {
        throw Error(e)
      }
    },

    async getData() {
      this.userInfo = null
      await this.$store.dispatch('UserInfo').then((res) => {
        this.userInfo = res
      })
      this.userInfo &&
        orderTypeNum({
          domainPrefix: this.$store.getters.domainPrefix || ''
        }).then((res) => {
          if (res.code === 200) {
            this.orderNum = res.data || {}
          } else {
            uni.showToast({
              icon: 'none',
              title: res.message
            })
          }
        })
      this.userInfo &&
        getMyWalletInfo().then((res) => {
          if (res.code === 200 && res.data) {
            this.walletStatue = true
          }
        })
      this.userInfo &&
        doVisAcctBalance().then((res) => {
          if (res.code === 200 && res.data) {
            this.walletInfo = res.data
          }
        })
      this.userInfo && getNewFlag().then(res => {
        if (res.code === 200) {
          this.showPurchaseFlag = res.data === 1 ? true : false
        }
      })
    },

    navSwitch(url) {
      if (this.$store.getters.isLogin) {
        uni.navigateTo({
          url
        })
      } else {
        uni.navigateTo({
          url: '/pages/user/login/index'
        })
      }
    },

    onClickMessageBtn() {
      uni.navigateTo({
        url: '/pages/user/message/index'
      })
    },

    walletNavSwitch() {
      if (this.walletStatue) {
        uni.navigateTo({
          url: '/pages/wallet/balance'
        })
      } else {
        uni.navigateTo({
          url: '/pages/wallet/openWallet'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.me_page {
  .u-cell {
    padding-top: 15rpx !important;
    padding-bottom: 15rpx !important;
  }

  .wallet-cell {
    margin: 20rpx;
    height: 90rpx;
    background-color: linear-gradient(-90deg, #e7be85 0%, #f3ecde 100%);
    background: url('~@/static/images/wallet-bg.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26rpx;
    .left {
      display: flex;
      color: #6a4714;
      align-items: center;
      line-height: 22rpx;
      .wallet-icon {
        width: 40rpx;
        height: 34rpx;
        margin-right: 10rpx;
      }
    }
    .right {
      display: flex;
    }
    .wallet-btn {
      height: 50rpx;
      background: linear-gradient(-90deg, #492d04 0%, #6a4714 77%, #875916 99%);
      border-radius: 25rpx;
      color: #fff;
      font-size: 28rpx;
      line-height: 50rpx;
      padding: 0 20rpx;
    }
  }

  .right-icon {
    position: relative;
    padding-right: 31rpx;

    .dot {
      position: absolute;
      width: 15rpx;
      height: 15rpx;
      right: 25rpx;
      border-radius: 50%;
      background: #e92e4a;
      z-index: 1;
    }
  }

  .wantBuy-cell {
    position: relative;
    .new {
      position: absolute;
      right: -60rpx;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      font-style: italic;
      color: #E5905B;
    }
  }
}
</style>
